<!-- SPDX-License-Identifier: Apache-2.0 -->

<!DOCTYPE html>
<html>

<head>
  <!-- <title>Hyperledger Fabric Tuna Application</title> -->
  <title>Hyperledger Fabric Agricultural Application</title>
  <link rel="icon" href="favicon.png" type="image/gif">

  <!-- require jquery and bootstrap scripts -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  <!-- adding style here -->
  <style type="text/css">
    header {
      /* background-color: transparent; */
      font-size: 30px;
      padding: 15px;
    }

    #body {
      margin-left: 3%;
      margin-right: 3%;
    }

    .form-control {
      margin: 8px;
    }

    #right_header {
      width: 20%;
      font-size: 15px;
      margin-right: 0px;
    }

    #left_header {
      margin-left: 0;
      width: 40%;
      display: inline-block;
    }

    #id {
      width: 49%;
      display: inline-block;
    }

    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }

    td,
    th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }

    tr:nth-child(even) {
      background-color: #dddddd;
    }

    .cover {
      color: rgb(255, 255, 255);
      position: relative;
      min-height: 400px;
      background: url("img/admin-cover.jpg") no-repeat scroll 0px 100% / cover transparent;
      margin-bottom: 20px;
    }
  </style>
</head>

<body ng-app="application" ng-controller="appController">


  <div class="cover">
    <header style="background-color:white;opacity:0.8;">
      <div id="left_header" style="color: black; opacity:1 !important;">Agriculture Blockchain Application - Admin Page</div>
   
      <a class="btn btn-danger btn-md float-right rounded-0" style="position: absolute; right: 0;margin-right: 10px;opacity:1 !important;" href="/logout"
        role="button">Logout</a>
    </header>
  </div>

  <div id="body">
    <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#menu1">Query All Products</a></li>
      <li><a data-toggle="tab" href="#menu2">Query All Product By Type</a></li>
      <li><a data-toggle="tab" href="#menu3">Create New Product</a></li>
      <!-- <li><a data-toggle="tab" href="#menu4">Change Product Holder</a></li>
        <li><a data-toggle="tab" href="#menu5">Consumer Trading</a></li> -->
    </ul>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <img class="img img-responsive" id="my_image" style="display: block; margin-left: auto; margin-right: auto;" />
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-content">
      <div id="menu1" class="tab-pane fade in active">
        <div class="form-group">
          <label>Query All Products</label>
          <!-- <p><input id="queryAllTuna" type="submit" value="Query" class="btn btn-primary" ng-click="queryAllTuna()"></p> -->
          <p><input id="queryAllproduct" type="submit" value="Query" class="btn btn-primary" ng-click="queryAllProduct()"></p>
        </div>

        <table id="all_product" class="table">
          <tr>
            <th>Product ID</th>
            <th>Producing Area</th>
            <th>Product Type</th>
            <th>Product Unit</th>
            <th>Unit Price</th>
            <th>Quantity</th>
            <th>Timestamp</th>
            <th>Holder</th>
            <th>Reference Image</th>
          </tr>
          <tr ng-repeat="product in all_product">
            <td style="vertical-align:middle">{{product.Key}}</td>
            <td style="vertical-align:middle">{{product.producing_area}}</td>
            <td style="vertical-align:middle">{{product.product_type}}</td>
            <td style="vertical-align:middle">{{product.product_unit}}</td>
            <td style="vertical-align:middle">{{product.unit_price}}</td>
            <td style="vertical-align:middle">{{product.quantity}}</td>
            <td style="vertical-align:middle">{{product.timestamp}}</td>
            <td style="vertical-align:middle">{{product.holder}}</td>
            <td style="vertical-align:middle"><a href="" class="open-AddImgDialog" data-id="img/{{ product.image_reference }}" data-toggle="modal" data-target="#exampleModal"><img
                  src="img/{{ product.image_reference }}" alt="" style="width:50px; height:auto;"></a></td>
          </tr>
        </table>

      </div>
      <div id="menu2" class="tab-pane fade">

        <div class="form-group">
          <label>Query a Specific Product Harvest</label><br>
          <h5 style="color:red;margin-bottom:2%" id="error_query">Error: Please enter a valid Prudocut Type</h5>
          Enter a Product Type: <input id="createName" class="form-control" type="text" placeholder="Ex: 옥수수" ng-model="product_type">
          <input id="querySubmit" type="submit" value="Query" class="btn btn-primary" ng-click="queryAllProductByType()">
        </div>

        <table id="query_product" class="table" align="center">

          <tr>
            <th>Product ID</th>
            <th>Producing Area</th>
            <th>Product Type</th>
            <th>Product Unit</th>
            <th>Unit Price</th>
            <th>Quantity</th>
            <th>Timestamp</th>
            <th>Holder</th>
            <th>Image Reference</th>
          </tr>
          <tr ng-repeat="query_product in query_products">
            <td style="vertical-align:middle">{{query_product.Key}}</td>
            <td style="vertical-align:middle">{{query_product.producing_area}}</td>
            <td style="vertical-align:middle">{{query_product.product_type}}</td>
            <td style="vertical-align:middle">{{query_product.product_unit}}</td>
            <td style="vertical-align:middle">{{query_product.unit_price}}</td>
            <td style="vertical-align:middle">{{query_product.quantity}}</td>
            <td style="vertical-align:middle">{{query_product.timestamp}}</td>
            <td style="vertical-align:middle">{{query_product.holder}}</td>
            <td style="vertical-align:middle"><a href="" class="open-AddImgDialog" data-id="img/{{ query_product.image_reference }}" data-toggle="modal" data-target="#exampleModal"><img
              src="img/{{ query_product.image_reference }}" alt="" style="width:50px; height:auto;"></a></td>
          </tr>
        </table>
      </div>
      <div id="menu3" class="tab-pane fade">

        <div class="form-group">
          <label>Create Product Record</label>
          <h5 style="color:green;margin-bottom:2%" id="success_create">Success! Tx ID: {{create_product}}</h5>
          <br> Enter Product ID: <input class="form-control" type="text" placeholder="Ex: 11" ng-model="product.id"> Enter
          Producing Area: <input class="form-control" type="text" placeholder="Ex: 남이면" ng-model="product.producing_area">          Enter
          Product Type: <input id="createName" class="form-control" type="text" placeholder="Ex: 옥수수" ng-model="product.product_type">          Enter
          Product Unit: <input id="createName" class="form-control" type="text" placeholder="Ex: g, kg, ea" ng-model="product.product_unit">          Enter
          Unit Price: <input class="form-control" type="text" placeholder="Ex: 10000" ng-model="product.unit_price"> Enter
          Quantity: <input class="form-control" type="text" placeholder="Ex: 5" ng-model="product.quantity"> Enter Timestamp:
          <input class="form-control" type="text" placeholder="Ex: 4982342301" ng-model="product.timestamp"> Enter Holder
          Name: <input class="form-control" type="text" placeholder="Ex: 홍길동" ng-model="product.holder">
          <input id="createSubmit" type="submit" value="Create" class="btn btn-primary" ng-click="recordProduct()">
        </div>
      </div>
      <div id="menu4" class="tab-pane fade">

        <div class="form-group">
          <label>Change Product Holder</label><br>
          <h5 style="color:green;margin-bottom:2%" id="success_holder">Success! Tx ID: {{change_holder}}</h5>
          <h5 style="color:red;margin-bottom:2%" id="error_holder">Error: Please enter a valid Product Id</h5>
          Enter a catch id between 1 and 10: <input class="form-control" name="assetSelect" placeholder="Ex: 1" ng-model="holder.id">          Enter
          New Holder Name: <input class="form-control" name="assetSelect" placeholder="Ex: Barry" ng-model="holder.name">
          <input id="transferSubmit" type="submit" value="Change" class="btn btn-primary" ng-click="changeHolder()">
        </div>
      </div>
      <div id="menu5" class="tab-pane fade">

        <div class="form-group">
          <label>Query Agriculture Product</label><br>
          <h5 style="color:red;margin-bottom:2%" id="error_consumer_query">Error: Please enter a valid Prudocut Type</h5>
          Enter a Product Type: <input id="createName" class="form-control" type="text" placeholder="Ex: 옥수수" ng-model="consumer_product_type">
          <input id="querySubmit" type="submit" value="Query" class="btn btn-primary" ng-click="consumerQueryAllProductByType()">
        </div>

        <table id="query_product" class="table" align="center">

          <tr>
            <th> </th>
            <th>Product ID</th>
            <th>Producing Area</th>
            <th>Product Type</th>
            <th>Product Unit</th>
            <th>Unit Price</th>
            <th>Quantity</th>
            <th>Timestamp</th>
            <th>Holder</th>
          </tr>
          <tr ng-repeat="query_product in consumer_query_products">
            <td><input type="checkbox" name="checkboxes" id="checkboxes-{{query_product.Key}}" value="{{query_product.Key}}"></td>
            <td>{{query_product.Key}}</td>
            <td>{{query_product.producing_area}}</td>
            <td>{{query_product.product_type}}</td>
            <td>{{query_product.product_unit}}</td>
            <td>{{query_product.unit_price}}</td>
            <td>{{query_product.quantity}}</td>
            <td>{{query_product.timestamp}}</td>
            <td>{{query_product.holder}}</td>
          </tr>
        </table>

        <div class="form-group">
          <input id="btnSelect" type="submit" value="선택상품주문" class="btn btn-primary" ng-click="">
          <input id="btnCancel" type="submit" value="취소" class="btn btn-danger" ng-click="">
        </div>
        <br />
        <div class="form-group" style="margin:0 auto;">
          <input id="btnPayment" type="submit" value="결재" class="btn btn-primary btn-lg btn-block" ng-click="">
        </div>
      </div>

    </div>
  </div>
</body>

<script>
  // Get the image and insert it inside the modal - use its "alt" text as a caption
  $(document).on("click", ".open-AddImgDialog", function () {
    var imgsrc = $(this).data('id');
    $('#my_image').attr('src', imgsrc);
  });
</script>
<!-- requiring the angular page -->
<script type="text/javascript" src="app.js"> </script>

</html>